<template>
  <nav class="nav">
    <span>当前位置：</span>
    <router-link to="/home">首页</router-link>
    <template v-for="item in modelValue" :key="item.t_nav_pk">
      <el-icon class="icon" ><ArrowRight /></el-icon>
      <router-link v-if="item.to" :to="item.to">{{ item.name }}</router-link>
      <span v-else class="span-nav">{{ item.name }}</span>
    </template>
  </nav>
</template>

<script setup lang="ts">
import {  ArrowRight } from "@element-plus/icons-vue";
import { defineProps } from "vue";

type Params = {
  modelValue: {
    name: string,
    to?: string
  }[]
}

defineProps<Params>();

</script>

<style scoped lang="scss">
.nav {
  border-bottom: 3px solid var(--base-color);
  padding: 10px 0px;
  display: flex;
  align-items: center;

  .el-icon {
    margin: 0px 5px;
  }
}
</style>